<template>
    <div class="tabsbread">
        <!-- 标签页 面包屑导航 -->
        <ul class="tabsbread-ul">
            <li
                v-for="(item, index) in tabsData" :key="index" 
                :class="[item.name === currentPage ? 'active-tab-item' : '', 'tabs-item']"
                @click="tabsbreadClickChange(item)"
            >
                <p :title="item.label" class="tabsbread-listname">{{item.label}}</p>
                <span class="close" @click.stop="removeTabs(item)" />
            </li>
        </ul>

    </div>
</template>

<script>
import route from '@/router';
export default {
    name: 'tabsbread',
    components:{
        
    },
    data () {
        return {
            currentPage: '',
            tabsData: []
        }
    },
    computed: {
        lang () {
        return this.$t('lang')
        }
    },
    mounted(){
        
    },
    methods: {
        // 点击切换页面
        tabsbreadClickChange (item) {
            console.log('打印了吗',item);
            item.path && this.$router.push({path: `/${item.module}/${item.path}`})
        },
        // 关闭
        removeTabs(item) {
            // 只剩一个了，先不关了
            if(this.tabsData.length === 1) {
                return
            }
            let arr = [], ind;
            // 删掉关闭的
            this.tabsData.map((ele, index) => {
                if(ele.name === item.name){
                    ind = index
                }else {
                    arr.push(ele)
                }
            })
            // 如果关闭的是现在打开的
            if(item.name === this.currentPage) {
                if(ind > 0) {
                    this.tabsbreadClickChange(arr[ind - 1])
                }else {
                    this.tabsbreadClickChange(arr[ind])
                }
            }
            this.tabsData = arr;
        },
        addTab(item) {
            let opened = false;
            this.currentPage = item.name
            // 已经有,切换&高亮显示
            this.tabsData.map(ele => {
                if(ele.name === item.name) {
                    opened = true;
                    this.currentPage = item.name
                }
            })
            // 没有或者不包含这一项,添加
            if(this.tabsData.length === 0 || !opened) {
                this.tabsData.push(item)
            }
        }
    },
    watch: {
        $route: {
            immediate:true,
            handler: function (newVal, oldVal) {
                if(newVal.matched.length) {
                    let previousModule = oldVal ? oldVal.path.split('/')[1] : ''
                    let currentModule = newVal.matched[0].path.split('/')[1]
                    // 切换了模块,清空tabs
                    if(previousModule !== currentModule) {
                        this.tabsData = []
                    }
                    route.options.routes.map(ele => {
                        if(ele.path === newVal.matched[0].path) {
                            let isOpen = false;
                            ele.children.map(item =>{
                                if(item.name === newVal.name) {
                                    isOpen = true
                                    this.addTab(item)
                                }
                            })
                            if(!isOpen) {
                                this.tabsData = []
                                this.addTab(item)
                            }
                        }
                    })
                }else {
                    // 这个模块没有匹配到子路由或者有问题
                    this.tabsData = []
                }
            }
        }
    },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tabsbread{
    width: 100%;
  }
  .tabsbread-ul{
    width: 100%;
    height: 48px;
    display: flex;
    background-color: #e9e9e9;
  }
  .tabsbread-ul .tabs-item{
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9; 
    box-sizing: border-box;
    display: flex;
    max-width: 180px;
    justify-content: center;
    align-items: center;
    font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #7e6b5a;
    padding: 0 24px;
    cursor: pointer;
    background-color: #dddddd;
    overflow: hidden;
    /* flex: 1; */
  }
  .tabsbread-ul .tabs-item .tabsbread-listname{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tabsbread-ul .tabs-item .close{
    width: 12px;
    height: 12px;
    margin-left: 15px;
    background: url('../../../assets/img/form_close_normal.png') center center/100% 100% no-repeat;
  }
  .tabsbread-ul .tabs-item .close:hover{
    background: url('../../../assets/img/form_close_selected.png') center center/100% 100% no-repeat;
  }
  .tabsbread-ul .tabs-item .close img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .tabsbread-ul .active-tab-item{
    background-color: #fff;
	border-right: none;
  }
  .bread-nav{
    width: 100%;
    height: 48px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 25px;
    box-sizing: border-box;
    font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #888888;
  }
</style>
